<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拉勾教育-Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script src="../js/jquery-1.9.1.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>

    <script>
        // 1、需求：单页面加载显示的时候，有两个按钮：1、显示用户数据；2、添加新用户
        // 2、需求：点击【显示用户数据】按钮的时候，应该把我们的用户对象数组基于table表格遍历出来
        var id_index = 0; //设置用户编号

        var persons = [];
        //更新或保存
        function saveOrUpdatePerson() {
            var pid = $("#pid").val();
            console.log(pid)
            if (pid) {
                for (var i = 0; i < persons.length; i++) {
                    if (pid == persons[i].pid) {
                        persons[i].pid = $("#id").val();
                        persons[i].id = $("#id").val();
                        persons[i].name = $("#pname").val();
                        persons[i].sex = $("#sex").val();
                        persons[i].password = $("#password").val();
                        persons[i].age = $("#age").val();
                        persons[i].birthday = $("#birthday").val();
                    }
                }
            } else { //保存
                console.log(pid)
                var id = $("#id").val();

                for (var i = 0; i < persons.length; i++) {
                    if (id == persons[i].id) {
                        alert("已经存在该用户工号了，请重新输入！");
                        return;
                    }
                }

                var name = $("#pname").val();
                var sex = $("#sex").val();
                var password = $("#password").val();
                var age = $("#age").val();
                var birthday = $("#birthday").val();
                var person = { "pid": id, "id": id, "name": name, "sex": sex, "password": password, "age": age, "birthday": birthday }
                persons.push(person);

            }
            close();
        }
        //关闭模态框
        function close() {
            $("#addModel").modal("hide");
            $(".modal-title").text("添加用户信息");
            $(".btn1").text("保存");
            cleanPerson();
            showPersons();
        }
        //清空模态框中的内容
        function cleanPerson() {
            console.log("清理了")
            $("#pid").val("")
            $("#id").val("");
            $("#pname").val("");
            $("#sex").val("");
            $("#password").val("");
            $("#age").val("");
            $("#birthday").val("");
        }

        function showPersons() {
            var tb = $("#tb1");
            var str = "<tr><td>序号</td><td>工号</td><td>姓名</td><td>性别</td><td>密码</td><td>年龄</td><td>出生日期</td></tr>"
            for (var i = 0; i < persons.length; i++) {
                str += "<tr><td><input class='checkbox' name='test' value='" + persons[i].id + "' type='checkbox' ></td><td>"
                    + persons[i].id + "</td><td>"
                    + persons[i].name + "</td><td>"
                    + persons[i].sex + "</td><td>"
                    + persons[i].password + "</td><td>"
                    + persons[i].age + "</td><td>"
                    + persons[i].birthday + "</td></tr>";
            }
            tb.html(str);
        }

        function deletePersons() {

            var checkeds = $('input:checkbox:checked');
            if (checkeds.length > 0) {
                var res = window.confirm("确定要删除选中的用户信息吗?");
                if (res == true) {

                    for (var i = 0; i < checkeds.length; i++) {

                        var id = checkeds.get(i).value;
                        for (var j = 0; j < persons.length; j++) {
                            if (id == persons[j].id) {
                                delete persons[j];
                            }
                        }
                    }
                    //删除后去null值
                    for (var i = 0; i < persons.length; i++) {
                        if (persons[i] == '' || persons[i] == null || typeof (persons[i]) == undefined) {
                            persons.splice(i, 1);
                            i = i - 1;
                        }
                    }
                    close();
                }
            } else {
                window.alert("无法删除,没有选中的用户!")
            }
        }

        function clickUpdate() {
            var checkeds = $("input:checkbox:checked");
            if (checkeds.length > 1) {
                window.alert("每次只能选中一个用户来编辑信息！")
            } else if (checkeds.length == 0) {
                window.alert("请选中需要编辑的用户！")
            } else {
                var id = checkeds.get(0).value;
                for (var i = 0; i < persons.length; i++) {
                    if (id == persons[i].id) {
                        $("#pid").val(persons[i].pid);
                        $("#id").val(persons[i].id);
                        $("#pname").val(persons[i].name);
                        $("#sex").val(persons[i].sex);
                        $("#password").val(persons[i].password);
                        $("#age").val(persons[i].age);
                        $("#birthday").val(persons[i].birthday);
                        $(".modal-title").text("修改用户信息");
                        $(".btn1").text("修改");
                        $("#addModel").modal("show")
                    }
                }
            }
        }

        function myfunc() {
            close();
        }

        function searchById() {
            var searchId = $("#searchId").val();
            for (var i = 0; i < persons.length; i++) {
                if (searchId == persons[i].id) {
                    var tb = $("#tb1");
                    var str = "<tr><td>序号</td><td>工号</td><td>姓名</td><td>性别</td><td>密码</td><td>年龄</td><td>出生日期</td></tr><tr><td><input type='checkbox' value='"
                        + persons[i].id + "'></td><td>"
                        + persons[i].id + "</td><td>"
                        + persons[i].name + "</td><td>"
                        + persons[i].sex + "</td><td>"
                        + persons[i].password + "</td><td>"
                        + persons[i].age + "</td><td>"
                        + persons[i].birthday + "</td></tr>"

                    tb.html(str);
                    $("#searchByIdModal").modal("hide");
                    $("#searchId").val("");
                    return;
                }
            }
            alert("没找到对应的工号,请重新输入！");
            // $("#searchId").val("");
        }

        function searchByName() {
            var searchName = $("#searchName").val();
            var tb = $("#tb1");
            var flag = false;
            var str = "<tr><td>序号</td><td>工号</td><td>姓名</td><td>性别</td><td>密码</td><td>年龄</td><td>出生日期</td></tr>";
            for (var i = 0; i < persons.length; i++) {
                if (searchName == persons[i].name) {
                    flag = true;
                    str += "<tr><td><input type='checkbox' value='"
                        + persons[i].id + "'></td><td>"
                        + persons[i].id + "</td><td>"
                        + persons[i].name + "</td><td>"
                        + persons[i].sex + "</td><td>"
                        + persons[i].password + "</td><td>"
                        + persons[i].age + "</td><td>"
                        + persons[i].birthday + "</td></tr>"
                }
            }
            if (flag) {
                tb.html(str);
                $("#searchByNameModal").modal("hide");
                $("#searchName").val("");
                return;
            } else {
                alert("不存在该用户姓名,请重新输入！")
            }
        }

        function myBtn2() {
            $("#searchId").val("");
            $("#searchName").val("");
        }



    </script>

</head>

<body>
    <!-- 两个按钮 -->
    <div style="margin: 15px;">
        <button type="button" class="btn btn-info" onclick="showPersons();"><span class="glyphicon glyphicon-user">显示所有用户</span></button>
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModel"><span class="glyphicon glyphicon-plus-sign">新增</span></button>
        <button type="button" class="btn btn-info" onclick="deletePersons()"><span class="glyphicon glyphicon-minus-sign">删除</span></button>
        <button type="button" class="btn btn-info" onclick="clickUpdate()"><span class="glyphicon glyphicon-edit">编辑</span></button>
        <!-- <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-search">查询</span></button> -->
        <button type="button" class="btn " data-toggle="modal" data-target="#searchByIdModal"><span class="glyphicon glyphicon-search">按工号查询</span></button>
        <button type="button" class="btn " data-toggle="modal" data-target="#searchByNameModal"><span class="glyphicon glyphicon-search">按姓名查询</span></button>
    </div>
    <!-- 显示用户列表的table -->
    <div>
        <table class="table table-hover table-striped" id="tb1">

        </table>
    </div>
    <!-- 添加用户信息的  模态框 -->
    <div class="modal fade" id="addModel" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加用户信息</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="#" method="post" onsubmit="saveOrUpdatePerson();return false;">
                        <input id="pid" hidden="hidden" />
                        <!--required="required" 提交前必须填写-->
                        请输入用户工号：<input class="form-control" id="id" type="number" required="required" /><br />
                        请输入用户姓名：<input class="form-control" id="pname" type="text" required="required" /><br />
                        请输入用户性别：
                        <select class="form-control" id="sex" required="required">
                            <option value="">--请选择--</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select><br />
                        请输入用户密码：<input class="form-control" id="password" type="number" required="required"/><br />
                        请输入用户年龄：<input class="form-control" id="age" type="number" required="required" /><br />

                        请输入用户出生日期：<input class="form-control" id="birthday" type="text" required="required"/><br />
                        <button class="btn1 btn-success btn-lg" type="submit"><span class="glyphicon glyphicon-ok"></span>保存</button>
                        <button type="button" onclick="myfunc()" class="btn btn-danger btn-lg" data-dismiss="modal"><span
                                class="glyphicon glyphicon-remove"></span>取消</button>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <!-- 根据工号查询 的模态框 -->

    <div class="modal fade" id="searchByIdModal" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="searchByIdModal-title">查询用户信息</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="#" method="post" onsubmit="searchById();return false;">
                        <!--required="required" 提交前必须填写-->
                        请输入查询的工号：<input class="form-control" id="searchId" type="number" required="required" /><br />
                        <button class="btn btn-success btn-lg" type="submit"><span class="glyphicon glyphicon-search"></span>查询</button>
                        <button type="button" class="btn2 btn-danger btn-lg" onclick="myBtn2()" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>取消</button>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="searchByNameModal" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="searchByNameModal-title">查询用户信息</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="#" method="post" onsubmit="searchByName();return false;">
                        <!--required="required" 提交前必须填写-->
                        请输入查询的姓名：<input class="form-control" id="searchName" type="text" required="required" /><br />
                        <button class="btn btn-success btn-lg" type="submit"><span class="glyphicon glyphicon-search"></span>查询</button>
                        <button type="button" class="btn2 btn-danger btn-lg" onclick="myBtn2()" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>取消</button>
                    </form>
                </div>

            </div>
        </div>
    </div>


</body>

</html>